<c-layouts.base>
    <div class="max-w-8xl mx-auto grid sm:grid-cols-[200px_auto] lg:grid-cols-[230px_auto_250px] flex-1 px-5">
        <div class="relative h-full pr-10 border-r-yellow-800 border-opacity-10 hidden sm:block text-[16px]">
            <c-sidebar />
        </div>
        <div class="overflow-auto flex-1 pb-10">
            <div class="
                max-w-[760px]
                mx-auto
                px-0
                pt-3
                md:pt-0
                md:px-5
                py-0
                !text-[16.5px]
                text-[#1a384a]

                prose
                prose-a:text-teal-600
                prose-h1:text-3xl
                prose-h2:text-2xl
                prose-h3:text-xl
                prose-headings:text-[#1a384a]
                prose-headings:font-semibold
                prose-code:before:content-none
                prose-code:after:content-none
                prose-code:bg-yellow-900/10
                prose-code:rounded
                prose-code:px-1
                prose-code:inline-block
                prose-code:my-0

                dark:text-white
                dark:text-opacity-70
                dark:prose-headings:text-white
                dark:prose-code:bg-gray-800
                dark:prose-code:text-gray-300/80
                dark:prose-strong:text-[#fff]
">
                {% if page_index %}
                    <div class="lg:hidden not-prose mb-6">

                        <c-ui.collapse>
                            <c-slot name="trigger">

                                <c-ui.button theme="subtle" class="w-full">
                                    <span class="flex w-full justify-between items-center">
                                        <span>On this page</span>
                                        <template x-if="!expanded">
                                            <c-icons.chevron-down class="size-5" />
                                        </template>
                                        <template x-if="expanded">
                                            <c-icons.chevron-up class="size-5" />
                                        </template>
                                    </span>
                                </c-ui.button>
                            </c-slot>

                            <div class="mt-5">
                                {{ page_index }}
                            </div>

                            <c-hr />
                        </c-ui.collapse>

                    </div>
                {% endif %}

                {{ slot }}
            </div>
        </div>
        <div class="relative h-full pl-10 border-opacity-10 hidden lg:block text-[15px]">
            {% if page_index %}
                <div class="sticky top-[68px] pt-0 pb-10">
                    <c-sidebar-heading>On this page</c-sidebar-heading>
                    <ul class="ml-0 pl-0 mt-4 ">
                        {{ page_index }}
                    </ul>
                </div>
            {% endif %}
        </div>
    </div>
</c-layouts.base>